<template>
<div>
    <div class="image">
      <div class="title">
        <h2>rosewood reservation</h2>
      </div>
    </div>
      <LayoutContain>
        <LayoutContent>
          <div slot="left">
            <ul>
              <li :class = "{active: isActive}">
                <span>客房预订</span>
                <i></i>
              </li>
              <li @click="jumpOrder">
                <span>我的订单</span>
                <i></i>
              </li>
              <li @click="jumplianxi">
                <span>预订帮助</span>
                <i></i>
              </li>
            </ul>
          </div>
          <div slot="right">
            <ul class="img">
              <li
              v-for="item in data"
              :key="item.id">
                <div class="goods-img" @click="jumpToRoom(item.id)" :style="{background:'url('+api+item.image+') center'}">
                </div>
                <div class="goods-title">
                  <h2>{{item.roomName}}</h2>
                  <i></i>
                  <span>{{item.roomType.typeName}}</span>
                </div>
                <ul class="goods-text">
                  <li>价格：¥{{item.roomType.price}}</li>
                  <li>家人专享：¥{{item.discount}}</li>
                  <li>人数：{{item.roomType.bedNum}}人</li>
                  <li>面积：{{item.roomType.roomArea}}m2</li>
                </ul>
              </li>
            </ul>
          </div>
        </LayoutContent>
    </LayoutContain>
    </div>
</template>

<script>
import Vue from 'vue'
import { Button, Select, Row, Col } from 'element-ui'
import { getData } from '../../api/reservation'
const LayoutContain = () => import('../../components/layout-contain')
const LayoutContent = () => import('../../components/layout-contain/layout-content')

Vue.use(Button)
Vue.use(Select)
Vue.use(Row)
Vue.use(Col)
export default {
  name: 'Reservation',
  components: {
    LayoutContain,
    LayoutContent
  },
  data () {
    return {
      isActive: true,
      data: {},
      api: 'http://47.96.89.247:8080/qf_hotel'
    }
  },
  created () {
    getData().then(res => {
      this.data = res.data
    }).catch(err => console.log(err))
  },
  methods: {
    jumpToRoom (id) {
      this.$router.push({
        name: 'roomIntroduction',
        query: {
          id
        }
      })
    },
    jumpOrder () {
      this.$router.push('/order')
    },
    jumplianxi () {
      this.$router.push('/onlinemessage')
    }
  }
}
</script>

<style lang="scss" scoped>
  .image{
    position: relative;
    height: 884px;
    background: url(../../assets/img/reservation/banner.png) no-repeat;
    background-size: cover;
    .title{
      // position: absolute;
      // left: 50%;
      // top: 50%;
      // transform: translate(-50%, -50%);
      h2{
        width: 100%;
        height: 112px;
        font-size: 80px;
        font-family: PingFang SC;
        font-weight: 600;
        line-height: 36px;
        color: #FFFFFF;
        opacity: 1;
        text-align: center;
        position: absolute;
        top: 40%;
      }
    }
  }
  .list{
    width: 256px;
    height: 241px;
    box-shadow: 0px 3px 6px #798C9D;
    background: rgba($color: #788B9C, $alpha: 0.05);
    ul{
      height: 100%;
      li{
        height: 57px;
        padding: 12px 64px 0;
        &:hover{
            cursor: pointer;
            background: #ccc;
          }
        span{
          width: 128px;
          height: 45px;
          font-size: 32px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 45px;
          color: #333333;
          opacity: 1;
        }
      }
      li.active{
        background: #788B9C;
        span{
          color: #ffffff;
        }
      }
    }
  }
  .goods{
    .img{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      >li{
        height: 593px;
        .goods-img{
          height: 278px;
          width: 250px;
          &:hover{
              cursor: pointer;
            }
          img{
            display: block;
            height: 278px;
            width: 250px;
          }
          margin-bottom: 8px;
        }
        .goods-title{
          h2{
            height: 42px;
            font-size: 30px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 36px;
            color: #333333;
            opacity: 1;
            display: inline-block;
            padding-right: 9px;
          }
          i{
            width: 0px;
            height: 25px;
            border: 1px solid #707070;
            opacity: 1;
            margin: 0 9px;
          }
          span{
            width: 144px;
            height: 25px;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 36px;
            color: #666666;
            opacity: 1;
          }
        }
        .goods-text{
          >li{
            height: 49px;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 49px;
            color: #333333;
            opacity: 1;
            list-style-type: disc;
            list-style: inside;
          }
        }
      }
    }
}
</style>
